<template>
	<view class="container">
		<view class="head" :style="{'height': 104 + topDis + 'px' }">
			<image src='../../static/img/head-bg.png' class="full" mode="aspectFill"></image>
			<view class="box" :style="{'padding-top': topDis + 'px' }">
				<view class="inputBox" @click="$Jump.Open('./search/search')">
					<view class="input flex-ac">
						<image src="../../static/img/ss.png" mode=""></image>
						<input type="text" placeholder="查询货源" disabled placeholder-style="color: #999"/>
					</view>
				</view>
				<view class="navBox">
					<u-tabs2 bgColor="transparent" inactive-color="#666666" :barWidth="110" :height="100" active-color="#333333" :list="navlist" :is-scroll="false" :current="current" @change="change"></u-tabs2>
				</view>
			</view>
		</view>
		<view class="body">
			<scroll-view scroll-y="true" class="scrollView"  @scrolltolower="getList()" :refresher-enabled='true' :refresher-triggered='isFresh' @refresherrefresh='freshList_()' refresher-background='#f7f7f7'>
				<view class="item" v-for="(item,index) in list" :key="index" @click.stop="lookDetail(item)">
					<view class="tit">
						<view class="flex-ac">{{item.goodsSourceNumber}}</view>
					</view>
					<view class="content">
						<view class="dz flex-ac">
							<view :class="{'hui': current === 3}">{{item.senderDistrictName || ''}}</view>
							<image v-if="current !== 3" class="md" src="../../static/img/dao.png" mode=""></image>
							<image v-if="current === 3" class="md" src="../../static/img/dao-hui.png" mode=""></image>
							<view :class="{'hui': current === 3}">{{item.receiverDistrictName || ''}}</view>
						</view>
						<view class="label flex-ac flex-b">
							<view class="hd flex-ac">
								<view class="label-1" :class="{'opac': current === 3}">{{item.useVehicleLength || ''}}</view>
								<view class="label-1 label-2" :class="{'opac': current === 3}">{{item.useVehicleModel || ''}}</view>
								<view class="label-1 label-3" :class="{'hui': current === 3}">{{getGoodsTypeName(item.goodsType)}}</view>
							</view>
							<view class="bd">{{item.createTime.split(' ')[0]}}创建</view>
						</view>
						<view class="info">
							<view class="time flex-ac">
								<image v-if="current !== 3" src='../../static/img/time2.png' mode="aspectFit"></image>
								<image v-if="current == 3" src='../../static/img/time-hui.png' mode="aspectFit"></image>
								<view>{{item.planLoadTime || ''}}装货</view>
							</view> 
							<view class="time flex-ac">
								<image v-if="current !==3 " src='../../static/img/goods2.png' mode="aspectFit"></image>
								<image v-if="current === 3" src='../../static/img/goods-hui.png' mode="aspectFit"></image>
								<view>{{item.goodsName}} | 共{{item.goodsTotalQuantity || ''}}{{item.goodsQuantityUnit || ''}} | 剩{{item.residueGoodsQuantity || ''}}{{item.goodsQuantityUnit || ''}} | {{item.transportFinishProgress}}%</view>
							</view>
							<view class="time flex-ac">
								<image v-if="current !==3 " src='../../static/img/xm2.png' mode="aspectFit"></image>
								<image v-if="current === 3" src='../../static/img/xm-hui.png' mode="aspectFit"></image>
								<view>{{item.projectName || ''}}</view>
							</view>
							<view class="time flex-ac flex-b">
								<view class="flex-ac">
									<image v-if="current !== 3" src='../../static/img/ding.png' mode="aspectFit"></image>
									<image v-if="current === 3" src='../../static/img/ding-hui.png' mode="aspectFit"></image>
									<view>{{item.carrierDepositAmount || 0}}元</view>
								</view>
								<view class="flex-ac" @click="$Common.call(item.dispatcherMobile)">
									<image v-if="current !== 3" src='../../static/img/ren.png' mode="aspectFit"></image>
									<image v-if="current === 3" src='../../static/img/tiao-hui.png' mode="aspectFit"></image>
									<view>{{item.dispatcherName || ''}}-{{item.dispatcherMobile || ''}}</view>
								</view>
							</view>
						</view>
						<view class="money" v-if="item.carrierFreightUnitPrice">
							<text class="num" :class="{'opac': current === 3}">{{item.carrierFreightUnitPrice}}</text>
							<text class="text" :class="{'opac': current === 3}">元/{{item.goodsQuantityUnit}}</text>
						</view>
						<view class="money" v-if="!item.carrierFreightUnitPrice">
							<text class="num" :class="{'opac': current === 3}">面议</text>
						</view>
						<view class="menuBox flex-ac" v-if="current === 0">
							<view class="fb flexmid" @click.stop="sureRelease(item.id, index)">确认发布</view>
							<view class="bj" @click.stop="$Jump.Open('./createGoods/createGoods?type=2&id=' + item.id)">编辑</view>
							<view class="bj" @click.stop="$Jump.Open('./createGoods/createGoods?type=3&id=' + item.id)">复制货源</view>
						</view>
						<view class="menuBox flex-ac" v-if="current === 1">
							<view class="fb flexmid" @click.stop="sureDone(item.id, index)">确认完成</view>
							<view class="bj" @click.stop="$Jump.Open('./assignOrders/assignOrders?id=' + item.id + '&dw=' + item.goodsQuantityUnit + '&time=' + item.planLoadTime)">派单</view>
							<view class="bj" @click.stop="$Jump.Open('./orderDrive/orderDrive?id=' + item.id)">接单司机({{item.receiptDriverQuantity}})</view>
						</view>
						<view class="menuBox flex-ac" v-if="current === 2">
							<view class="bj" @click.stop="$Jump.Open('./createGoods/createGoods?type=3&id=' + item.id)">复制货源</view>
						</view>
						
					</view>
					<view class="zf" @click.stop="cancel(item.id, index)" v-if="current === 0 || current === 1">作废</view>
				</view>
				<x-nothing v-if="list.length === 0"></x-nothing>
				<u-gap height="2"></u-gap>
			</scroll-view>
		</view>
	
		<!-- 添加货源 -->
		<image src="../../static/img/add.png" class="addGoods" mode="" @click="$Jump.Open('./createGoods/createGoods')"></image>
	</view>
</template>

<script>
	import { goodsType } from '@/utils/goodsType.js'; // 
	export default {
		data() {
			return {
				topDis: this.$app.globalData.topDis,
				navlist: [{
					name: '待发布'
				}, {
					name: '已发布'
				}, {
					name: '已完成',
					// count: 5
				},{
					name: '已作废',
					// count: 5
				}],
				current: 0,
				isFresh: false,
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					createTimeBegin: '', // 创建时间：开始
					createTimeEnd: '', // 创建时间：结束
					senderName: '', // 发货方名称
					receiverName: '', // 收货方名称
					planLoadTimeEnd: '', // 计划装货时间：结束
					goodsName: '', // 货物名称
					senderDistrictName: '', // 发货区域
					senderDetailLocation: '', // 	发货详细地址
					receiverDistrictName: '', // 收货区域
					receiverDetailLocation: '', // 收货详细地址
					projectName: '', // 项目名称
					id: '', // id
					goodsSourceNumber: '', // 货源编号
					finishTimeBegin: '', // 完成时间：开始
					finishTimeEnd: '', // 完成时间：结束
					releaseTimeBegin: '', // 发布时间：开始
					releaseTimeEnd: '', // 发布时间：结束
					statusFlag: 'wait_release', // 货源状态 wait_release：待发布，release：已发布，finish：已完成，cancel：已作废
					businessTypeCode: '', // 业务类型 1002996：干线普货运输，1003997：城市配送，1003998：农村配送，1002998：集装箱运输，1003999：其他
				},
				list: [],
				goodsType: goodsType
			}
		},
		onLoad() {

		},
		onShow() {
			this.queryForm.pageNo = 1
			this.getList()
		},
		watch:{
			current(){
				this.queryForm.pageNo = 1
				if(this.current === 0){
					this.queryForm.statusFlag = 'wait_release'
					this.getList()
				}else if(this.current === 1){
					this.queryForm.statusFlag = 'release'
					this.getList()
				}else if(this.current === 2){
					this.queryForm.statusFlag = 'finish'
					this.getList()
				}else{
					this.queryForm.statusFlag = 'cancel'
					this.getList()
				}
			},
		},
		methods: {
			lookDetail(item){
				if(item.statusFlag === 'wait_release'){
					this.$Jump.Open('./goodsInfo/goodsInfo?id=' + item.id)
				}else{
					this.$Jump.Open('./GoodsInfo_yfb/GoodsInfo_yfb?id=' + item.id)
				}
			},
			// 确认完成
			sureDone(id, index){
				uni.showModal({
					title: '提示',
					content: '是否确认完成',
					success: (res) => {
						if(res.confirm){
							console.log('确认完成')
							this.$Net.post('/consignorApi/goodsSource/confirmFinish',{
								id: id
							}).then(res=>{
								this.$Toast.messageIcon('操作成功')
								this.list.splice(index, 1)
							})
						}
					}
				})
			},
			// 切换导航
			change(index) {
				this.current = index;
			},
			// 确认发布
			sureRelease(id, index){
				uni.showModal({
					title: '提示',
					content: '是否要发布该货源？',
					success: (res) => {
						if(res.confirm){
							console.log('确认发布')
							this.$Net.post('/consignorApi/goodsSource/confirmRelease',{
								id: id
							}).then(res=>{
								this.$Toast.messageIcon('操作成功')
								this.list.splice(index, 1)
							})
						}
					}
				})
			},
			// 货源分页列表 /consignorApi/goodsSource/page
			getList(){
				this.$Net.get('/consignorApi/goodsSource/page',this.queryForm).then(res=>{
					console.log('项目列表:', res)
					if(this.queryForm.pageNo == 1){
						this.list = res.data.rows
					}else{
						this.list = this.list.concat(res.data.rows)
					}
					this.queryForm.pageNo++
					setTimeout(()=>{
						this.isFresh = false
					},500)
				})
			},
			// 下拉刷新
			freshList_(){
				this.queryForm.pageNo = 1
				this.isFresh = true
				this.getList()
			},
			// 作废
			cancel(id, index){
				uni.showModal({
					title: '确认作废',
					content: '是否要作废该货源？',
					success: (res) => {
						if(res.confirm){
							console.log('确认作废')
							this.$Net.post('/consignorApi/goodsSource/confirmCancel',{
								id: id
							}).then(res=>{
								this.$Toast.messageIcon('操作成功')
								this.list.splice(index, 1)
							})
						}
					}
				})
			},
			
			// 获取商品名称
			getGoodsTypeName(code){
				for(let i = 0;i<this.goodsType.length; i++){
					if(this.goodsType[i].value == code){
						return this.goodsType[i].label
						break
					}
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.addGoods{
		position: fixed;
		right: 20rpx;
		bottom: 280rpx;
		width: 100rpx;
		height: 100rpx;
		z-index: 10;
	}
	.body{
		width: 100%;
		height: calc(100vh - 148px);
		.scrollView{
			width: 100%;
			height: 100%;
		}
		.item{
			width: 100%;
			background-color: #fff;
			margin-bottom: 20rpx;
			position: relative;
			.zf{
				font-size: 30rpx;
				color: #999;
				position: absolute;
				left: 20rpx;
				bottom: 20rpx;
			}
			.content{
				padding: 20rpx;
				.menuBox{
					padding-top: 20rpx;
					flex-direction: row-reverse;
					.fb{
						width: 170rpx;
						height: 70rpx;
						background: #3db020;
						border-radius: 10rpx;
						color: #fff;
						font-size: 30rpx;
						margin-left: 20rpx;
					}
					.bj{
						padding: 14rpx 20rpx;
						border: 1px solid #3db020;
						border-radius: 5px;
						color: #3DB020;
						font-size: 30rpx;
						line-height: 42rpx;
						margin-left: 20rpx;
					}
				}
				.money{
					margin-top: 20rpx;
					width: 100%;
					padding-right: 20rpx;
					text-align: right;
					.num{
						width: 100%;
						font-size: 40rpx;
						color: #F66923;
						font-weight: bold;
						line-height: 56rpx;
					}
					.text{
						font-size: 26rpx;
						color: #F66923;
					}
					.opac{
						opacity: 0.5;
					}
				}
				.info{
					margin-top: 20rpx;
					width: 100%;
					// height: 210rpx;
					background: #fafafa;
					border-radius: 20rpx;
					padding: 24rpx 20rpx;
					.time{
						width: 100%;
						margin-bottom: 10rpx;
						view{
							font-size: 26rpx;
							color: #666;
						}
						image{
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
					}
					.time:last-child{
						margin-bottom: 0;
					}
				}
				.label{
					width: 100%;
					margin-top: 10rpx;
					// font-size: 24rpx;
					.hd{
						.label-1{
							font-size: 26rpx;
							padding: 2rpx 10rpx;
							color: #3DB020;
							border: 2rpx solid #3db020;
							border-radius: 6rpx;
							line-height: 36rpx;
							margin-right: 10rpx;
						}
						.label-2{
							color: #F66923;
							border: 2rpx solid #F66923;
						}
						.label-3{
							color: #666666;
							border: 2rpx solid #666666;
						}
						.label-1:last-child{
							margin-right: 0;
						}
					}
					.bd{
						color: #999;
						font-size: 26rpx;
					}
					.opac{
						opacity: 0.5;
					}
					.hui{
						color: #999 !important;
						border-color: #999 !important;
					}
				}
				.dz{
					font-size: 34rpx;
					font-weight: bold;
					.md{
						width: 48rpx;
						height: 48rpx;
						margin: 0 20rpx;
					}
					.hui{
						color: #999;
					}
				}
			}
			.tit{
				width: 100%;
				// background: #ffffff;
				padding: 0 20rpx;
				view{
					height: 80rpx;
					border-bottom: 1rpx solid #F5F7FB;
				}
			}
		}
	}
	.head {
		width: 100%;
		height: 148px;
		position: relative;

		.box {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			.inputBox {
				width: 100%;
				height: 108rpx;
				padding-left: 30rpx;
				padding-top: 4rpx;

				.input {
					width: 480rpx;
					height: 80rpx;
					background: rgba(255, 255, 255, .8);
					border-radius: 20rpx;
					padding: 0 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
					input{
						font-size: 30rpx;
						color: #333;
						flex: 1;
					}
				}
			}

			.navBox {
				width: 100%;
				height: 100rpx;
			}
		}

	}
</style>